// This is the custom JavaScript file referenced by index.html. You will notice
// that this file is currently empty. By adding code to this empty file and
// then viewing index.html in a browser, you can experiment with the example
// page or follow along with the examples in the book.
//
// See README.txt for more information.
// $(document).ready(function () {
//     $("#switcher").hover(function () {
//         $(this).addClass("hover");
//     }, function () {
//         $(this).removeClass("hover");
//     });
// });
//
// $(document).ready(function () {
//     var toggleSwitcher = function(event){
//         if(!$(event.target).is("button")){
//             $("#switcher button").toggleClass("hidden");
//         }
//     };
//     $("#switcher").on("click", toggleSwitcher);
//     $("#switcher button").click(function () {
//         $("#switcher").off("click", toggleSwitcher);
//         if(this.id == "switcher-default"){
//             $("#switcher").on("click", toggleSwitcher);
//         }
//     });
// });
// $(document).ready(function () {
//     第一次修改的代码，似乎是简短了很多
//      $("#switcher-default").addClass("selected").on("click", function () {
//          $("body").removeClass();
//      });
//      //一旦有按钮被点击了，就对所有的按钮都去掉selected类，然后只给被点击的这个添加selected类
//      $("#switcher button").on("click", function () {
//          $("body").removeClass();
//          $("#switcher button").removeClass("selected");
//          $(this).addClass("selected");
//      });
//      $("#switcher-narrow").on("click", function () {
//          $("body").addClass("narrow");
//      });
//      $("#switcher-large").on("click", function () {
//          $("body").addClass("large");
//      });
//
//     第二次修改的代码,灰常的简洁
//      $("#switcher-default").addClass("selected");
//      $("#switcher button").on("click", function () {
//          var bodyClass = this.id.split("-")[1];//可能是narrow可能是large可能是default
//          $("body").removeClass().addClass(bodyClass);
//          $("#switcher button").removeClass("selected");
//          $(this).addClass("selected");
//      });
//
//     //再次修改
//     $("#switcher-default").addClass("selected");
//     $("#switcher").click(function (event){
//         if($(event.target).is('button')) {
//             var bodyClass = event.target.id.split("-")[1];//可能是narrow可能是large可能是default
//             $("body").removeClass().addClass(bodyClass);
//             $("#switcher button").removeClass("selected");
//             $(event.target).addClass("selected");
//             //阻止事件冒泡
//             event.stopPropagation();
//         }
//
//     });
//
//
//     如果在没有考虑冒泡的情况下，直接写成如下格式
//      $("#switcher").click(function () {
//       // $("#switcher button").toggleClass("hidden");
//      });
//     点击三个按钮会同时惊动#switcher的点击事件，从而在点击按钮之后折叠转换器部分
//
//
//     (1)使用事件对象event判断确保被电击的元素是<div id="switcher">,而不是其后代元素，比如按钮以及h3等等
//     $("#switcher").click(function (event) {
//          if(event.target === this){
//              $("#switcher button").toggleClass("hidden");
//          }
//      });
// });

$(document).ready(function () {

    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    // 初始版本，没有用户回馈（比如点击按键之后按键的颜色发生变化使得用户得知自己点击的是哪一个按钮）
    // $("#switcher-default").on("click", function () {
    //     $("body").removeClass("large").removeClass("narrow");
    // });
    // $("#switcher-large").on("click", function () {
    //     $("body").addClass("large").removeClass("narrow");//delete narrow property for large only
    // });
    // $("#switcher-narrow").on("click", function () {
    //     $("body").addClass("narrow").removeClass("large");
    // });

    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    //利用事件处理程序的上下文this，来反馈
    //首先先给default键添加上选中类，表示网页刚加载完成时属于默认状态
    // $("#switcher-default")
    //     .addClass("selected")
    //     .on("click", function () {
    //         $("body").removeClass("large").removeClass("narrow");
    //         //将所有的按钮包括自己在内都去掉selected类
    //         $("#switcher button").removeClass("selected");
    //         //成功将所有按钮去除selected类之后，再给自己添加上selected类
    //         $(this).addClass("selected");
    //     });
    // $("#switcher-narrow").on("click", function () {
    //     $("body").addClass("narrow").removeClass("large");
    //     //我仿佛看见了相同的代码
    //     $("#switcher button").removeClass("selected");
    //     $(this).addClass("selected");
    // });
    // $("#switcher-large").on("click", function () {
    //     $("body").addClass("large").removeClass("narrow");
    //     //我仿佛看见了相同的代码
    //     $("#switcher button").removeClass("selected");
    //     $(this).addClass("selected");
    // });

    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    //因为我刚才仿佛是看见了相同的代码，所以决定把它们写在一起
    // $("#switcher-default")
    //     .addClass("selected")
    //     .on("click", function () {
    //         $("body").removeClass("large").removeClass("narrow");
    //     });
    // $("#switcher-narrow").on("click", function () {
    //     $("body").addClass("narrow").removeClass("large");
    // });
    // $("#switcher-large").on("click", function () {
    //     $("body").addClass("large").removeClass("narrow");
    // });
    //
    // $("#switcher button").on("click", function () {
    //     $("#switcher button").removeClass("selected");
    //     $(this).addClass("selected");
    // });
    //以上代码明显简洁了很多


    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    //如果不给removeClass()传参数的话，他会默认将所有的类都去掉，所以进一步重构代码
    // $("#switcher-default")
    //     .addClass("selected")
    //     .on("click", function () {
    //         $("body").removeClass();
    //     });
    // $("#switcher-narrow").on("click", function () {
    //     $("body").removeClass().addClass("narrow");
    // });
    // $("#switcher-large").on("click", function () {
    //     $("body").removeClass().addClass("large");
    // });
    //
    // $("#switcher button").on("click", function () {
    //     $("#switcher button").removeClass("selected");
    //     $(this).addClass("selected");
    // });

    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    //但是我们发现每一次点击按钮之后都会将body的所有类属性全部去掉，那么我们可以将上一步代码中的最后一段代码写在最前
    //面，大致意图在于，先执行所有按钮普适的程序，比如将body的类去掉，然后给其他按钮去掉selected类而给自己添加上
    // selected类，之后再各自执行其特有的事件
    // $("#switcher-default").addClass("selected");//给dafault添加selected类
    // //对所有按钮都有普适性的代码,还完美的契合了switcher 的功能
    // $("#switcher button").on("click", function () {
    //     $("body").removeClass();
    //     $("switcher button").removeClass("selected");
    //     $(this).addClass("selected");
    // });
    // $("#switcher-narrow").on("click", function () {
    //     $("body").addClass("narrow");
    // });
    // $("#switcher-large").on("click", function () {
    //     $("body").addClass("large");
    // });

    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    //由上面的代码可以发现一个规律，那就是每一个按钮特有的事件所赋予的类名都与他们的id名一致，所以可以借助this（引用的是
    //DOM元素），来消除特殊的处理程序
    // $("#switcher-default").addClass("selected");
    // $("#switcher button").on("click", function () {
    //     var bodyClass = this.id.split("-")[1];
    //     //例如switcher-narrow,截取出来的就是narrow
    //     $("body").removeClass().addClass(bodyClass);
    //     $("#switcher button").removeClass("selected");
    //     $(this).addClass("selected");
    // });

    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    //通过简写形式，减少代码量
    // $("#switcher-default").addClass("selected");
    // $("#switcher button").click(function(){
    //     var bodyClass = this.id.split("-")[1];
    //     //例如switcher-narrow,截取出来的就是narrow
    //     $("body").removeClass().addClass(bodyClass);
    //     $("#switcher button").removeClass("selected");
    //     $(this).addClass("selected");
    // });

    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    //利用hidden类建立折叠功能
    //将button隐藏起来之后，switcher的体积会变小，内里包含的按钮消失，仿佛折叠起来一般
    // $("#switcher-default").addClass("selected");
    // $("#switcher button").click(function(){
    //     var bodyClass = this.id.split("-")[1];
    //     //例如switcher-narrow,截取出来的就是narrow
    //     $("body").removeClass().addClass(bodyClass);
    //     $("#switcher button").removeClass("selected");
    //     $(this).addClass("selected");
    // });
    // $("#switcher h3").click(function () {
    //     $("#switcher button").toggleClass("hidden");
    // });

    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    //给switcher h3加上鼠标悬浮特效
    //hover()里面可以有两个参数，前者用于鼠标悬浮在元素上时，后者用于鼠标离开后
    // $("#switcher-default").addClass("selected");
    // $("#switcher button").click(function(){
    //     var bodyClass = this.id.split("-")[1];
    //     //例如switcher-narrow,截取出来的就是narrow
    //     $("body").removeClass().addClass(bodyClass);
    //     $("#switcher button").removeClass("selected");
    //     $(this).addClass("selected");
    // });
    // $("#switcher h3").hover(function () {
    //     //再次使用事件上下文this,this 指代h3
    //     $(this).addClass("hover");
    // }, function () {
    //     $(this).removeClass("hover");
    // });
    //这样写好麻烦

    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    //                  插一段笔记
    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    //事件响应分为两种：事件捕获以及事件冒泡
    //捕获是事件首先会交给最外层的元素，冒泡则是先交给最具体的元素，然后层层向上传递
    //jQuery始终是在模型的冒泡阶段注册事件处理程序
    //但是冒泡会带来一些问题，例子如下
    // <div>
    // 火影忍者
    // 海贼王
    // 死神
    // 一拳超人
    // <a href="#">
    //     世界第一初恋
    // 纯情罗曼史
    // </a>
    // </div>
    // <script>
    // $(document).ready(function () {
    //     $("a").on("click", function () {
    //         $("div").addClass("large");
    //     });
    //     $("div").on("click",function () {
    //         alert("你惊动到我了！哼！");
    //     } );
    // });
    // </script>
    //当我们只想点击a链接来使得字体变大时却发现意外的惊动到了父元素的click事件
    //解决方法可以将代码修改为如下形式
    // $(document).ready(function () {
    //     $("a").on("click", function (event) {
    //         $("div").addClass("large");
    //          event.stopPropagation();
    //     });
    //     $("div").on("click",function () {
    //         alert("你惊动到我了！哼！");
    //     } );
    // });

    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    //方法一========>应用一下阻止冒泡的方法
    // $("#switcher-default").addClass("selected");
    // $("#switcher button").click(function(flapjacks){
    //     var bodyClass = this.id.split("-")[1];
    //     //例如switcher-narrow,截取出来的就是narrow
    //     $("body").removeClass().addClass(bodyClass);
    //     $("#switcher button").removeClass("selected");
    //     $(this).addClass("selected");
    //     //回顾一下如果没有这一行该怎么办
    //     flapjacks.stopPropagation();
    // });
    // $("#switcher h3").hover(function () {
    //     //再次使用事件上下文this,this 指代h3
    //     $(this).addClass("hover");
    // }, function () {
    //     $(this).removeClass("hover");
    // });
    // $("#switcher").click(function () {
    //     $("#switcher button").toggle("hidden");
    // });

    //方法二========>或者判断一下事件的对象
    // $("#switcher-default").addClass("selected");
    // $("#switcher button").click(function(){
    //     var bodyClass = this.id.split("-")[1];
    //     //例如switcher-narrow,截取出来的就是narrow
    //     $("body").removeClass().addClass(bodyClass);
    //     $("#switcher button").removeClass("selected");
    //     $(this).addClass("selected");
    //     //回顾一下如果没有这一行该怎么办
    // });
    // $("#switcher h3").hover(function () {
    //     //再次使用事件上下文this,this 指代h3
    //     $(this).addClass("hover");
    // }, function () {
    //     $(this).removeClass("hover");
    // });
    // $("#switcher").click(function (flapjacks) {
    //     if(flapjacks.target === this){
    //         console.log(this);
    //         //打印出来的内容是<div id="switcher></div>,结局很明显了
    //         //重申：this 引用的是携带相应行为的DOM元素
    //         $("#switcher button").toggleClass("hidden");
    //     }
    // });

    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    //显然我们可以把switcher上所有的点击事件合并起来
    //大致思路为：如果我们在switcher上点击的是按钮那么就完成按钮的功能
    //如果我们点击的是switcher盒子本身，那么就完成hidden切换
    // $("#switcher-default").addClass("selected");
    // $("#switcher").click(function (flapjacks) {
    //     //谨记此时的this 是switcher盒子
    //     if($(flapjacks.target).is("button")){
    //         var bodyClass = flapjacks.target.id.split("-")[1];
    //         //例如switcher-narrow,截取出来的就是narrow
    //         $("body").removeClass().addClass(bodyClass);
    //         $("#switcher button").removeClass("selected");
    //         $(flapjacks.target).addClass("selected");
    //     }else{
    //         $("#switcher button").toggleClass("hidden");
    //     }
    // }).hover(function () {
    //     $(this).addClass("hover");
    // }, function () {
    //     $(this).removeClass("hover");
    // });

    //以上这种情况已经在可以接受的范围之内了
    //也可以使用jQuery内置的事件委托
    //直接点明只有button才有响应function的资格，哼唧>_<
    $("#switcher").on("click", "button", function (ly) {
        var bodyClass = ly.target.id.split("-")[1];
        $("body").removeClass().addClass(bodyClass);
        $("#switcher button").removeClass("selected");
        $(this).addClass("selected");
        console.log(ly);
    });

});